<template>
    <div>
        <!-- <h3>基本用法（继承 Element Plus 属性）</h3>
    <OverflowTooltip content="这是一段非常非常非常非常非常非常非常非常非常非常长的文本" width="200px" placement="bottom-start" effect="light"
      popper-class="custom-tooltip" />

    <h3>使用插槽和自定义样式</h3>
    <OverflowTooltip width="200px" class="custom-container" style="font-weight: bold;" transition="el-fade-in-linear">
      <span style="color: blue;">这是一段带样式的非常非常非常非常非常非常非常非常非常非常长的文本</span>
    </OverflowTooltip>

    <h3>完全继承 Tooltip 属性</h3>
    <OverflowTooltip content="这段文字很长" width="150px" :offset="10" :show-after="500" :hide-after="200" /> -->
        <!-- <div style="width: 200px">
            {{ multipValues }}
            <MultipInput v-model="multipValues" />
        </div> -->

        <!-- <div class="app-container">
            <div class="demo-section">
                <h2>SearchBox 示例</h2>
                <div class="demo-content">
                    <SearchBox v-model="searchData" :fields="searchFields" :loading="loading" :is-show-reset-btn="true"
                        :is-show-all-fields="false" size="small" @search-change="handleSearch"
                        @field-change="handleFieldChange" @reset="handleReset" />
                </div>
            </div>

            <div class="demo-section">
                <h2>MultipInput 示例</h2>
                <div class="demo-content">
                    <MultipInput v-model="multipValue" placeholder="请输入多个值" @change="handleMultipChange" />
                </div>
            </div>
        </div> -->

        <!-- <header>
      <Dropdown placement="bottom" :trigger="trigger" :menu-options="options"
        @visible-change="e => inlineConsole('visible change', e)" @select="e => inlineConsole('select', e)" manual
        ref="tooltipRef">
        <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
      </Dropdown>
    </header>

    <Icon icon="arrow-up" :size="size" type="danger" color="#0e7a0d" />
    <main>
      <Button ref="buttonRef" @click="open">Test Button</Button>
      <Button plain @click="close">Plain Button</Button>
      <Button round>Round Button</Button>
      <Button circle>VK</Button>
      <Button disabled>Disabled Button</Button><br /><br />
      <Button type="primary">Primary</Button>
      <Button type="success">Success</Button>
      <Button type="info">Info</Button>
      <Button type="warning">Warning</Button>
      <Button type="danger">Danger</Button><br /><br />
      <Button type="primary" plain>Primary</Button>
      <Button type="success" plain>Success</Button>
      <Button type="info" plain>Info</Button>
      <Button type="warning" plain>Warning</Button>
      <Button type="danger" plain>Danger</Button><br /><br />
      <Button size="large">Large</Button>
      <Button size="small">Small</Button><br /><br />
      <Button size="large" loading>Loading</Button>
      <Button size="large" icon="arrow-up">Icon</Button><br /><br />

      <Collapse v-model="openedValue">
        <Item name="a" title="Title A">
          <h1>headline title</h1>
          <div> this is content a aaa </div>
        </Item>
        <Item name="b" title="Title B">
          <div> this is bbbbb test </div>
        </Item>
        <Item name="c" title="Disabled Title" disabled>
          <div> this is cccc test </div>
        </Item>
      </Collapse>
      {{ openedValue }}
    </main> -->
        <!-- <h3>虚拟列表示例</h3>
        <VirtualList :data="largeData" :item-height="30" height="200px">
            <template #default="{ item, index }">
                <div>{{ index }} - {{ item }}</div>
            </template>
        </VirtualList> -->
        <ExampleList/>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, h } from 'vue'
import Dropdown from './components/Dropdown/Dropdown.vue'
import type { MenuOption } from './components/Dropdown/types'
import Button from './components/Button/Button.vue'
import Collapse from './components/Collapse/Collapse.vue'
import Item from './components/Collapse/CollapseItem.vue'
import Icon from './components/Icon/Icon.vue'
import OverflowTooltip from './components/OverflowTooltip/OverflowTooltip.vue'
import MultipInput from './components/MultipInput/MultipInput.vue'
import { createMessage } from './components/Message/method'
import type { ButtonInstance } from './components/Button/types'
import type { TooltipInstance } from './components/Tooltip/types'
import SearchBox from './components/SearchBox/SearchBox.vue'
import type { UnionFormConfigType } from './components/MagicForm/types/UnionFormConfigType'
import ExampleList from './ExampleList.vue'
import VirtualList from './components/VirtualList/VirtualList.vue';

const largeData = Array.from({ length: 1000 }, (_, index) => `Item ${index}`);
const buttonRef = ref<ButtonInstance | null>(null)
const tooltipRef = ref<TooltipInstance | null>(null)
const openedValue = ref(['a'])
const size = ref<any>('3x')
const trigger = ref<any>('click')
const options: MenuOption[] = [
    { key: 1, label: h('b', 'this is bold') },
    { key: 2, label: 'item2', disabled: true },
    { key: 3, label: 'item3', divided: true },
    { key: 4, label: 'item4' }
]
const open = () => {
    createMessage({ message: 'hello world', duration: 0, showClose: true })
    tooltipRef.value?.show()
}
const close = () => {
    tooltipRef.value?.hide()
}
const inlineConsole = (...args: any) => {
    console.log(...args)
}
const multipValues = ref(['a', 'b', 'c'])
const multipValue = ref('')

// SearchBox 相关
const loading = ref(false)
const searchData = ref({})

const searchFields: UnionFormConfigType[] = [
    {
        type: 'input',
        label: '用户名',
        prop: 'username',
        isFixed: true,
        span: 6
    },
    {
        type: 'input',
        label: '用户名',
        prop: 'username2',
        isFixed: true,
        span: 6
    },
    {
        type: 'input',
        label: '用户名',
        prop: 'username3',
        isFixed: true,
        span: 6
    },
    {
        type: 'input',
        label: '用户名',
        prop: 'username4',
        isFixed: true,
        span: 6
    },
    {
        type: 'input',
        label: '用户名',
        prop: 'username6',
        isFixed: true,
        span: 6
    },
    {
        type: 'select',
        label: '状态',
        prop: 'status',
        isFixed: true,
        span: 6,
        options: [
            { label: '全部', value: '' },
            { label: '启用', value: '1' },
            { label: '禁用', value: '0' }
        ]
    },
    {
        type: 'date',
        label: '创建时间',
        prop: 'createTime',
        dateType: 'daterange',
        span: 12
    },
    {
        type: 'input',
        label: '邮箱',
        prop: 'email',
        span: 6
    },
    {
        type: 'select',
        label: '角色',
        prop: 'role',
        span: 6,
        options: [
            { label: '管理员', value: 'admin' },
            { label: '用户', value: 'user' },
            { label: '访客', value: 'guest' }
        ]
    }
]

const handleSearch = (data: any) => {
    console.log('搜索数据：', data)
    loading.value = true
    // 模拟搜索请求
    setTimeout(() => {
        loading.value = false
    }, 1000)
}

const handleFieldChange = (data: any) => {
    console.log('字段变化：', data)
}

const handleReset = (data: any) => {
    console.log('重置数据：', data)
}

const handleMultipChange = (value: string) => {
    console.log('MultipInput 值变化：', value)
}

onMounted(() => {
    // createMessage({ message: 'hello world', duration: 0, showClose: true })
    // createMessage({ message: 'hello world again', duration: 0, type: 'success', showClose: true })
    // createMessage({ message: 'hello world three', duration: 0, type: 'danger', showClose: true })
    // if (buttonRef.value) {
    //   console.log('buttonRef', buttonRef.value.ref)
    // }
    // setTimeout(() => {
    //   openedValue.value = ['a', 'b']
    //   size.value = '2xl'
    //   // instance.destory()
    //   // trigger.value = 'hover'
    // }, 2000)
})
</script>

<style>
header {
    line-height: 1.5;
}

.logo {
    display: block;
    border: 1px solid green;
}

.vk-tooltip__popper {
    border: 1px solid red;
}

@media (min-width: 1024px) {
    header {
        display: flex;
        place-items: center;
        padding-right: calc(var(--section-gap) / 2);
    }

    header .wrapper {
        display: flex;
        place-items: flex-start;
        flex-wrap: wrap;
    }
}

.app-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;

    .demo-section {
        margin-bottom: 40px;

        h2 {
            margin-bottom: 20px;
            color: var(--el-text-color-primary);
        }

        .demo-content {
            padding: 20px;
            background-color: var(--el-bg-color);
            border-radius: 4px;
            box-shadow: var(--el-box-shadow-light);
            position: relative;
        }
    }
}

.search-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    .el-form-item {
        flex: 1;
        min-width: 150px;
        margin-right: 20px;
    }

    .el-select,
    .el-input {
        width: 100%;
    }

    .el-button {
        margin-left: 10px;
    }
}
</style>
